.
<template>
	<el-select
		:model-value="value"
		:disabled="disabled"
		:placeholder="placeholder"
		size="default"
		popper-class="select_box"
		append-to=".font_family"
		@change="$emit($event)"
		:filterable="filterable"
		default-first-option
		allow-create
    :empty-values="[null, undefined]"
		:style="{ width: '100%', height: '100%' }">
		<el-option
			v-for="(item, index) in selectList"
			:key="index"
			:label="item.value"
			:value="item.label" />
	</el-select>
</template>

<script setup>
let props = defineProps({
	filterable: {
		type: Boolean,
		default: false
	},
	value: {
		type: String,
		default: ''
	},
	selectList: {
		type: Array,
		default: () => []
	},
	placeholder: {
		type: String,
		default: 'Select'
	},
	disabled: {
		type: Boolean,
		default: false
	}
});

</script>

<style lang="less" scoped>
:deep(.el-select__wrapper) {
	background: transparent;
	border: none;
	min-height: auto;
	height: 100%;
	box-shadow: none;
	.el-select__input {
		width: auto !important;
		color: #fff;
	}
}

:deep(.el-select__placeholder) {
	color: #fff;
}

:deep(.is-transparent) {
	color: rgba(248, 248, 248, 0.3);
}

:deep(.el-select__wrapper.is-hovering:not(.is-focused)) {
	box-shadow: none;
}

:global(.el-popper.is-light) {
	background: rgba(102, 102, 102, 0.8);
	backdrop-filter: blur(10px);
	border-radius: 5px;
	border: none;
}

:global(.el-popper__arrow::before) {
	background: rgba(102, 102, 102, 0.8) !important;
	border: none !important;
}

:global(.el-select-dropdown__item) {
	border-radius: 5px;
	color: #999999;
}
:global(.el-select-dropdown__item.is-hovering) {
	background-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

:global(.el-select-dropdown__item.is-selected) {
	color: #fff;
}

:global(.el-select-dropdown__item:hover) {
	background-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}
</style>
